<template>
  <li class="cjy-page-body-commodity-li">
    <div>
      <div class="cjy-page-bod-commodity-box">
        <div class="cjy-page-image-box" @click="gotoDetail">
          <img v-lazy="comInfor.mainPic" class="cjy-page-image-box-img">
        </div>
        <div class="cjy-page-title-box">
          <span style="width: 100%">{{goodsName || '\r'}} </span>
        </div>
        <div class="cjy-page-subtitle-box">
          <span style="width: 100%">{{subTitle || '\r' }}</span>
        </div>
        <div class="cjy-page-lable-box">
          {{regularTypeLabel || '\r'}}
        </div>
        <div class="cjy-page-price-box">
          <span class="cjy-price">¥{{showWsPrice}}</span>&nbsp;
          <del v-if="showNormalPrice != showWsPrice && showNormalPrice!='0.00'">¥{{showNormalPrice}}</del>
        </div>
        <update-cart ref="updateCart"
                     :addCartButtonType="0"
                     :commodityInfor="comInfor"
                     :goodsId="goodsId">
        </update-cart>

        <div class="cjy-page-go-detail" :style="styleConfig.buttonType" @click="cartButtonOnClick">
          立即抢购
        </div>
        <!--<div class="cjy-add-cart-button-box"-->
        <!--v-if="!buttonActive"-->
        <!--@click="cartButtonOnClick">-->
        <!--<update-cart-->
        <!--:addCartButtonType="0"-->
        <!--ref="updateCart"-->
        <!--:commodityInfor="comInfor"-->
        <!--:goodsId="goodsId">-->
        <!--<button-cange-cart :type="2" fontSize="1.5rem"></button-cange-cart>-->
        <!--</update-cart>-->
        <!--</div>-->
      </div>
    </div>
  </li>
</template>

<script>
  import UpdateCart from '@/components/UpdateCart'
  import lazyLoad from 'vue-lazyload'
  import ButtonCangeCart from '@/components/ButtonChangeCart/icon'
  import  minxinAuto from '../mixinAuto.vue'
  export default {
    mixins: [minxinAuto],
    components: {UpdateCart, ButtonCangeCart},
  }

</script>

<style scoped>
  .cjy-page-body-commodity-li {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .cjy-page-body-commodity-li > div {
    width: 100%;
    padding: 0 0.35rem;
  }

  .cjy-page-bod-commodity-box {
    width: 100%;
    background: white;
    position: relative;
    border-radius: 1px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-radius: 10px;
  }

  .cjy-page-image-box {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.8%;
    overflow: hidden
  }

  .cjy-page-title-box, .cjy-page-lable-box, .cjy-page-price-box, .cjy-page-lable-box, .cjy-page-subtitle-box {
    padding: 0 0.5rem;
    text-align: left;
    vertical-align: middle;
  }

  .cjy-page-title-box {
    color: #181818;
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.2rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  .cjy-page-subtitle-box {
    color: #777777;
    font-weight: 600;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  .cjy-page-lable-box {
    height: 1rem;
    font-size: 0.7rem;
    line-height: 1.2rem;
    vertical-align: middle;
    color: rgb(255, 6, 23);
  }

  .cjy-page-lable-box > .cjy-lable {
    display: inline-block;
    border-radius: 0.3rem;
    border: 1px solid rgb(255, 6, 23);
    font-size: 0.5rem;
    color: rgb(255, 6, 23);
    padding: 0px 0.2rem;
  }

  .cjy-page-price-box {
    position: relative;
    bottom: 0;
    width: 100%;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1rem;
    color: rgb(255, 6, 23);
  }

  .cjy-page-price-box > .cjy-price {
    font-size: 0.9rem;
    font-weight: 400;
    color: #444;
  }

  .cjy-page-price-box > .cjy-price-unit {
    color: black;
  }

  .cjy-add-cart-button-box {
    height: 2.5rem;
    width: 2.5rem;
    position: absolute;
    padding: 1rem 0.5rem 0;
    z-index: 1;
    right: 0;
    bottom: 0;
  }

  .cjy-page-go-detail {
    position: absolute;
    color: #fff;
    bottom: 0rem;
    right: 0.75rem;
    margin-bottom: 0.3rem;
    background: #FBD49A;
    padding: 0 0.3rem;
  }
</style>
